<template>
  <div class="box">
    <van-nav-bar
      :title="housing.community"
      left-arrow
      @click-left="$router.back()"
    />
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in housing.houseImg" :key="index"
        ><van-image
          width="100%"
          height="100%"
          :src="'http://liufusong.top:8080' + item"
      /></van-swipe-item>
    </van-swipe>
    <div class="mian">
      <div class="title">
        <h4>{{ housing.title || '暂无标题' }}</h4>
        <span v-for="(item, index) in housing.tags" :key="index">{{
          item
        }}</span>
      </div>
      <div class="body">
        <div>
          <p class="xi">{{ housing.price || 1000 }}/月</p>
          <span>租金</span>
        </div>
        <div>
          <p>{{ housing.roomType || '一室' }}</p>
          <span>房形</span>
        </div>
        <div>
          <p>{{ housing.size || 30 }}平米</p>
          <span>面积</span>
        </div>
      </div>
      <div class="footer">
        <div>
          <p>装修:<span>精装</span></p>
          <p>
            楼层:<span>{{ housing.floor }}</span>
          </p>
        </div>
        <div>
          <p>
            朝向:<span
              v-for="(item, index) in housing.oriented || ['西']"
              :key="index"
              >{{ item }}</span
            >
          </p>
          <p>类型:<span>普通住房</span></p>
        </div>
      </div>
    </div>
    <div class="housingestate">
      <div class="title">小区: {{ housing.community }}</div>
      <div class="map">
        <div id="container"></div>
      </div>
      <div class="house">
        <div class="title"><h4>房屋配套</h4></div>
        <div class="body">
          <ul>
            <li v-for="(item, index) in housing.supporting" :key="index">
              <div>
                <i class="iconfont icon-dianshiji"></i>
                {{ item || '暂无数据' }}
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="housing">
      <div class="title"><h4>房屋概况</h4></div>
      <div class="house-owner">
        <div class="pic">
          <van-image
            width="100%"
            height="100%"
            src="http://liufusong.top:8080/img/avatar.png"
          />
        </div>
        <div class="information">
          <p>王女士</p>
          <span><van-icon name="medal-o" />已认证房主</span>
        </div>
        <van-button plain type="primary">发消息</van-button>
      </div>
      <div class="desc">
        {{
          housing.desc ||
          '  1.周边配套齐全，地铁四号线陶然亭站，交通便利，公交云集，距离北京南站、西站都很近距离。 2.小区规模大，配套全年，幼儿园，体育场，游泳馆，养老院，小学。 '
        }}
      </div>
    </div>
    <div class="like">
      <div class="title">猜你喜欢</div>
      <div class="box">
        <div class="house">
          <div class="pic">
            <van-image
              width="100%"
              height="100%"
              :src="
                'http:' +
                '//liufusong.top:8080/uploads/upload_8dfa85414ffe885616e3bb1a79b5c814.png'
              "
            />
          </div>
          <div class="text">
            <h4 class="sin-line">6666</h4>
            <p>一室/112/东</p>
            <span>近地铁</span>
            <br />
            <b>1500元/月</b>
          </div>
        </div>
      </div>
      <div class="box">
        <div class="house">
          <div class="pic">
            <van-image
              width="100%"
              height="100%"
              :src="
                'http:' +
                '//liufusong.top:8080/uploads/upload_69df33f88a417113cbd953e3b8777c6f.jpeg'
              "
            />
          </div>
          <div class="text">
            <h4 class="sin-line">123456</h4>
            <p>一室/112/东</p>
            <span>近地铁</span>
            <br />
            <b>1500元/月</b>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div><van-icon name="star-o" />收藏</div>
      <div>在线咨询</div>
      <div class="green">电话预约</div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
// import { gethousingdetails } from '@/api/housingdetails'
export default {
  name: 'housingdetails-page',
  components: {},
  props: {},
  data() {
    return {
      cityCode: this.$route.params.id,
      housing: {}
    }
  },
  beforeMount() {},
  async mounted() {
    console.log(this.cityCode)
    const res = await axios({
      url: `http://liufusong.top:8080/houses/${this.cityCode}`
    })
    this.housing = res.data.body
    console.log(this.housing)

    const { BMapGL } = window
    const map = new BMapGL.Map('container')
    const point = new BMapGL.Point(
      this.housing.coord.longitude,
      this.housing.coord.latitude
    )
    console.log(point)
    map.centerAndZoom(point, 16)

    const content = this.housing.community
    const label = new BMapGL.Label(content, {
      // 创建文本标注
      position: point,
      offset: new BMapGL.Size(10, 20)
    })
    map.addOverlay(label) // 将标注添加到地图中
    label.setStyle({
      // 设置label的样式
      color: '#fff',
      fontSize: '12px',
      border: '1px solid rgb(255, 0, 0)',
      background: 'rgb(238, 93, 91)',
      padding: '5px'
    })
  },
  computed: {},
  watch: {},
  async created() {},
  methods: {}
}
</script>

<style scoped lang="less">
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 252px;
  height: 252px;
  text-align: center;
  background-color: #39a9ed;
}
.box {
  background-color: #f6f5f6;
}
.mian {
  padding: 10px;
  background-color: #ffffff;
  margin-bottom: 10px;
  .title {
    // padding: 10px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    h4 {
      margin: 5px 0 15px 5px;
    }
    span {
      padding: 2px 5px;
      background-color: #e1f5f8;
      border-radius: 4px;
    }
  }
  .body {
    height: 84px;
    border-bottom: 1px solid #ccc;
    display: flex;
    justify-content: space-between;
    align-items: center;

    div {
      flex: 1;
      text-align: center;
      p {
        font-weight: 700;

        color: red;
        font-size: 20px;
        margin-bottom: 5px;
      }
      .xi {
        font-weight: normal;
      }
      span {
        color: #ccc;
      }
    }
  }
  .footer {
    display: flex;
    justify-content: space-between;
    padding-top: 15px;
    div {
      flex: 1;

      p {
        color: #ccc;
        margin-bottom: 5px;
        span {
          color: #000;
        }
      }
    }
  }
}
.housingestate {
  margin-bottom: 10px;
  background-color: #fff;
  .title {
    padding: 0 10px;
    height: 50px;
    line-height: 50px;
  }
  .map {
    width: 100%;
    height: 145px;
    // background-color: red;
    #container {
      width: 100%;
      height: 100%;
    }
  }
  .house {
    padding: 10px;
    .title {
      padding: 0 10px;
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid #ccc;
    }
    .body {
      ul {
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        div {
          // background-color: #39a9ed;
          width: 71px;
          height: 71px;
          display: flex;
          justify-content: center;
          flex-direction: column;
          i {
            font-size: 30px;
          }
        }
      }
    }
  }
}
.housing {
  background-color: #fff;
  margin-bottom: 10px;
  padding: 0 10px;
  .title {
    padding: 0 10px;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #ccc;
  }
  .house-owner {
    margin-top: 10px;
    height: 62px;
    // background-color: red;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .pic {
      width: 52px;
      height: 52px;
      // background-color: red;
    }
    .information {
      p {
        margin-bottom: 2px;
      }
      span {
        color: red;
      }
    }
  }
  .desc {
    margin-top: 15px;
    // background-color: #39a9ed;
    width: 355px;
    height: 130px;
  }
}
.like {
  background-color: #fff;
  padding: 10px;
  margin-bottom: 35px;
  .title {
    height: 50px;
    line-height: 50px;
    border-bottom: 2px solid #ccc;
  }

  .box {
    width: 100%;
    padding: 10px;
    background-color: #fff;
    .house {
      height: 120px;
      width: 100%;
      // background-color: red;
      border-bottom: 1px solid #ccc;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .pic {
        width: 106px;
        height: 80px;
        // background-color: red;
      }
      .text {
        // background-color: blue;
        width: 227px;
        height: 89px;
        color: #000;
        padding: 5px 0 0 10px;

        p {
          color: #ccc;
          font-size: 12px;
        }
        span {
          display: inline-block;
          padding: 2px 4px;
          background-color: #41c38d;
          color: #9fdfe7;
          font-size: 12px;
          border-radius: 4px;
          margin-right: 2px;
        }
        b {
          color: red;
        }
      }
    }
  }
}
.bottom {
  width: 100%;
  display: flex;
  height: 50px;
  position: fixed;
  bottom: 0;
  left: 0;
  border-top: 1px solid #ccc;
  background-color: #fff;
  div {
    height: 100%;
    flex: 1;
    // background-color: red;
    border-right: 1px solid #ccc;
    line-height: 50px;
    color: #ccc;
    font-size: 20px;
    text-align: center;
    align-items: center;
  }
  .green {
    background-color: #41c38d;
  }
}
</style>
